<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="150px">
      <el-form-item label="客户名称">
        <el-input v-model="formInline.customerName" placeholder="客户名称" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="exCustomer('formInline')">导出</el-button>
        <el-button type="primary" @click="openadd('formInline')">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-upload
            class="upload-demo"
            drag
            action="http://localhost:10020/Customer/importCustomer"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
    </el-form>


    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="customerId"
          label="唯一标识的客户ID"
          width="150">
      </el-table-column>
      <el-table-column
          prop="customerName"
          label="客户名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="birthTime"
          label="客户的出生日期"
          width="120">
      </el-table-column>
      <el-table-column
          prop="email"
          label="客户的电子邮箱"
          width="120">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="客户的联系电话"
          width="120">
      </el-table-column>
      <el-table-column
          prop="cityName"
          label="省/市/区"
          width="200">
        <template v-slot="r">
          {{r.row.provinceName}} -- {{r.row.districtName}} -- {{r.row.cityName}}
        </template>
      </el-table-column>
      <el-table-column
          prop="vehicleBrand"
          label="车辆名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="customerStatus"
          label="客户账户状态"
          width="120">
        <template v-slot="s">
          <el-tag v-if="s.row.customerStatus==0">正常</el-tag>
          <el-tag v-if="s.row.customerStatus==1">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="paymentMethod"
          label="客户支付状态"
          width="120">
        <template v-slot="s">
          <el-tag v-if="s.row.paymentMethod==0">信用卡</el-tag>
          <el-tag v-if="s.row.paymentMethod==1">电子支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="sex"
          label="客户性别"
          width="120">
        <template v-slot="s">
          <el-tag v-if="s.row.sex==0">男</el-tag>
          <el-tag v-if="s.row.sex==1">女</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="membershipLevel"
          label="客户的会员等级"
          width="120">
      </el-table-column>
      <el-table-column
          prop="emergencyName"
          label="紧急联系人姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="ephone"
          label="紧急联系人电话"
          width="120">
      </el-table-column>
      <el-table-column
          prop="additionalNotes"
          label="其他需要记录的备注信息"
          width="120">
      </el-table-column>
      <el-table-column
          label="图片"
          width="120">
        <template v-slot="s">
          <el-image
              style="width: 100px; height: 100px"
              :src="s.row.avatar"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button @click="customerUpdate(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="customerDelete(scope.row.customerId)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-button @click="customerZxt" type="primary">展示折线图</el-button>
    <div id="main1" style="width: 500px;height: 500px;"></div>

    <el-dialog title="添加客户"  :visible.sync="dialogFormVisible">
      <el-form :model="addForm" :rules="rules" ref="formName">
        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="addForm.customerName"></el-input>
        </el-form-item>
        <el-form-item label="客户出生日期" prop="birthTime">
          <el-date-picker
              v-model="addForm.birthTime"
              type="date"
              placeholder="选择出生日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="客户的电子邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="客户的联系电话" prop="customerPhone">
          <el-input v-model="addForm.customerPhone"></el-input>
        </el-form-item>
        <el-form-item label="省/市/区" :label-width="formLabelWidth">
          <el-cascader
              v-model="addForm.cascaderValue"
              :options="options"
              :props="props"
              @change="getchange"
              clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="车辆名称">
          <el-select v-model="addForm.vehicleId" placeholder="请选择车辆名称">
            <el-option
                v-for="item in opt"
                :key="item.vehicleId"
                :label="item.vehicleBrand"
                :value="item.vehicleId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户账户状态">
          <el-radio v-model="addForm.customerStatus" label=0>正常</el-radio>
          <el-radio v-model="addForm.customerStatus" label=1>停用</el-radio>
        </el-form-item>
        <el-form-item label="客户支付状态">
          <el-radio v-model="addForm.paymentMethod" label=0>信用卡</el-radio>
          <el-radio v-model="addForm.paymentMethod" label=1>电子支付</el-radio>
        </el-form-item>
        <el-form-item label="客户性别">
          <el-radio v-model="addForm.sex" label=0>男</el-radio>
          <el-radio v-model="addForm.sex" label=1>女</el-radio>
        </el-form-item>
        <el-form-item label="客户的会员等级" prop="membershipLevel">
          <el-input v-model="addForm.membershipLevel"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人姓名" prop="emergencyName">
          <el-input v-model="addForm.emergencyName"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人电话" prop="emergencyPhone">
          <el-input v-model="addForm.emergencyPhone"></el-input>
        </el-form-item>
        <el-form-item label="其他需要记录的备注信息">
          <el-input v-model="addForm.additionalNotes"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:10020/Customer/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :befor-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('formName')">提交</el-button>
      </div>
    </el-dialog>


    <el-dialog title="修改客户"  :visible.sync="updateFormVisible">
      <el-form :model="updateForm">
        <el-form-item label="客户名称">
          <el-input v-model="updateForm.customerName"></el-input>
        </el-form-item>
        <el-form-item label="客户出生日期">
          <el-date-picker
              v-model="updateForm.birthTime"
              type="date"
              placeholder="选择出生日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="客户的电子邮箱" >
          <el-input v-model="updateForm.email"></el-input>
        </el-form-item>
        <el-form-item label="客户的联系电话">
          <el-input v-model="updateForm.customerPhone"></el-input>
        </el-form-item>
        <el-form-item label="客户的会员等级">
          <el-input v-model="updateForm.membershipLevel"></el-input>
        </el-form-item>
        <el-form-item label="省/市/区" :label-width="formLabelWidth">
          <el-cascader
              v-model="areaIds"
              :options="options"
              :props="props"
              @change="areaChange"
              clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="车辆名称">
          <el-select v-model="updateForm.vehicleId" placeholder="请选择车辆名称">
            <el-option
                v-for="item in opt"
                :key="item.vehicleId"
                :label="item.vehicleBrand"
                :value="item.vehicleId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户账户状态">
          <el-radio v-model="updateForm.customerStatus" label=0>正常</el-radio>
          <el-radio v-model="updateForm.customerStatus" label=1>停用</el-radio>
        </el-form-item>
        <el-form-item label="客户支付状态">
          <el-radio v-model="updateForm.paymentMethod" label=0>信用卡</el-radio>
          <el-radio v-model="updateForm.paymentMethod" label=1>电子支付</el-radio>
        </el-form-item>
        <el-form-item label="客户性别">
          <el-radio v-model="updateForm.sex" label=0>男</el-radio>
          <el-radio v-model="updateForm.sex" label=1>女</el-radio>
        </el-form-item>
        <el-form-item label="紧急联系人姓名">
          <el-input v-model="updateForm.emergencyName"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人电话">
          <el-input v-model="updateForm.emergencyPhone"></el-input>
        </el-form-item>
        <el-form-item label="其他需要记录的备注信息">
          <el-input v-model="updateForm.additionalNotes"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:10020/Customer/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :befor-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import * as echarts from "echarts";

export default {
  name: "CustomerView",
  data(){
    return{
      imageUrl:'',
      areaIds:[],
      zxtData:[],
      formInline:{},
      tableData:[],
      total:0,
      pageNum:1,
      pageSize:3,
      dialogFormVisible:false,
      updateFormVisible:false,
      updateForm:{},
      addForm:{
        cascaderValue:[],
      },
      options:[],
      props: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      formLabelWidth:'120px',
      opt:[],
      rules: {
        customerName: [
          { required: true, message: '请输入客户名称', trigger: 'blur' },
        ],
        birthTime: [
          { required: true, message: '请选择出生日期', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'change' }
        ],
        customerPhone: [
          { required: true, message: '请输入客户手机号码', trigger: 'change' }
        ],
        emergencyName: [
          { required: true, message: '请输入紧急联系人姓名', trigger: 'change' }
        ],
        emergencyPhone: [
          { required: true, message: '请输入紧急联系人电话', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    list(){
      this.axios.post("/Customer/SysCustomerList?pageNum="+this.pageNum+"&pageSize="+this.pageSize,this.formInline).then(r=>{
        this.tableData=r.data.data.list
        this.total=r.data.data.total
      })
    },
    handleSizeChange(val){
      this.pageSize=val
      this.list();
    },
    handleCurrentChange(val){
      this.pageNum=val
      this.list();
    },
    exCustomer(){
      window.location.href="http://localhost:10020/Customer/excelSysCustomer"
    },
    customerUpdate(row){
      this.getCity();
      this.areaIds=[]
      this.updateForm = row
      if (row.xid){
        this.areaIds.push(row.xid,row.sid,row.qid)
      }
      this.updateFormVisible=true;
      this.imageUrl=row.avatar;
    },
    update(){
      this.axios.post("/Customer/SysCustomerUpdate",this.updateForm).then(r=>{
        if (r.data.code==200){
          this.updateFormVisible=false;
          this.$message.success(r.data.msg);
          this.list();
        }else {
          this.$message.error(r.data.msg);
        }
      })
    },
    getList(){
      this.axios.post("/Customer/getList").then(r=>{
        this.opt=r.data.data;
      })
    },
    getCity(){
      this.axios.post("/Customer/getCity").then(r=>{
        this.options=r.data.data
      })
    },
    openadd(){
      this.getCity();
      this.dialogFormVisible=true;
      this.addForm={customerStatus:'0',paymentMethod:'0'}
    },
    add(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("/Customer/SysCustomerAdd",this.addForm).then(r=>{
            if (r.data.code==200){
              this.dialogFormVisible=false;
              this.$message.success(r.data.msg);
              this.list();
            }else {
              this.$message.error(r.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getchange(id){
      console.log(id);
      if (id.length>0){
        this.addForm.xid=id[0];
        this.addForm.sid=id[1];
        this.addForm.qid=id[2];
      }else {
        this.addForm.provinceId= '';
      }
    },
    customerDelete(customerId){
      this.axios.post("/Customer/SysCustomerDelete?customerId="+customerId).then(r=>{
        if (r.data.code==200){
          this.$message.success(r.data.msg);
          this.list();
        }else {
          this.$message.error(r.data.msg);
          this.list();
        }
      })
    },
    customerZxt(){
      this.axios.post("/Customer/customerZxt").then(res=>{
        this.zxtData=res.data.data;
        let xdata=[];
        let ydata=[];

        console.log(res.data)
        this.zxtData.forEach(element=>{
          xdata.push(element.xzhou);
          ydata.push(element.yzhou);
        })

        var chartDom = document.getElementById('main1');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          xAxis: {
            type: 'category',
            data: xdata
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: ydata,
              type: 'line',
              smooth: true
            }
          ]
        };
        option && myChart.setOption(option);
      })

    },
    areaChange(value){
        this.updateForm.xid=value[0];
        this.updateForm.sid=value[1];
        this.updateForm.qid=value[2];
    },
    handleAvatarSuccess(res,file){
      this.imageUrl=URL.createObjectURL(file.raw)
      this.addForm.avatar(res);

    },
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
  created() {
    this.list();
    this.getList();
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
